<!-- 工资发放统计 -->
<template>
  <div class="dashboard-editor-container">

    <!-- <panel-group @handleSetLineChartData="handleSetLineChartData" /> -->

    

    <el-row :gutter="32">
      <!-- <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart />
        </div>
      </el-col> -->
      <el-col :span="16" class="card-box">
        <el-card >
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button
                type="warning"
                icon="el-icon-download"
                size="mini"
                @click="handleExport"
              >导出</el-button>
            </el-col>
          </el-row>
          <el-table  v-loading="loading" :data="salaryList" >
            <el-table-column label="单位" align="center" prop="companyName" />
            <el-table-column label="应发总额" align="center" prop="amount" />
            <el-table-column label="实际发放金额" align="center" prop="realAmount" />
            <el-table-column label="应扣金额" align="center" prop="deductAmount" />
            <el-table-column label="欠发金额" align="center" prop="oweAmount" />
            <el-table-column label="应发人数" align="center" prop="totalStaff" />
            <el-table-column label="实发人数" align="center" prop="realStaff" />
            <el-table-column label="欠发人数" align="center" prop="oweStaff" />
          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </el-card>
      </el-col>
      <el-col :span="8" class="card-box">
          <el-card>
            <div slot="header"><span>警示单位</span></div>
            <div class="chart-wrapper">
              <pie-chart  ref="chart1" style="height:506px;" />
            </div>
          </el-card>
        </el-col>
    </el-row>

    <el-row :gutter="32">
      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header"><span>欠费金额</span></div>
          <div class="chart-wrapper">
             <line-chart  ref="chart2" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header"><span>欠费人数</span></div>
          <div class="chart-wrapper">
             <line-chart  ref="chart3" />
          </div>
        </el-card>
      </el-col>
    </el-row>
    
  </div>
</template>

<script>
import PanelGroup from '../../dashboard/PanelGroup'
import LineChart from '../../dashboard/LineChart'
import RaddarChart from '../../dashboard/RaddarChart'
import PieChart from '../../dashboard/PieChart2'
import BarChart from '../../dashboard/BarChart'

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}
import {listByDept,exportByDept,salaryOweAmount } from "../../../api/system/salary";
export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        postCode: undefined,
        postName: undefined,
        status: undefined
      },
      // 总条数
      total: 0,
      salaryList:[],
      lineChartData: lineChartData.newVisitis,
      oweAmountPie:[],
      oweStaffLine:[],
      oweUserNum:[],
      item:''
    }
  },
  created() {
    this.getList();
    this.getSalaryList();
  },
  methods: {
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    },
    /** 导出按钮操作 */
    handleExport() {
      this.$confirm('是否确认导出所有工资数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return exportByDept();
      }).then(response => {
        this.download(response.msg);
      }).catch(function() {});
    },
    /** 查询岗位列表 */
    getList() {
      this.loading = true;
      listByDept(this.queryParams).then(response => {
        this.salaryList = response.data;
        this.total = response.total;
        this.loading = false;
      });
    },
    getSalaryList() {
            salaryOweAmount().then(response => {
                // console.log(response.data) 

                //警示单位
                let chartData1 = response.data;
                chartData1.forEach(item => {
                    //金额
                    this.oweAmountPie.push({
                      value:item.oweAmount,
                      name:item.companyName
                    });
                    //人数
                    this.oweUserNum.push({
                      value:item.oweStaff,
                      name:item.companyName
                    });
                    //单位名称
                    this.oweStaffLine.push(item.companyName)
                });
                this.$refs.chart1.initChart(this.oweStaffLine,this.oweAmountPie);

                //欠费金额
                this.$refs.chart2.initChart(this.oweAmountPie,this.oweStaffLine,"欠费金额：");

                //欠费人数
                this.$refs.chart3.initChart(this.oweUserNum,this.oweStaffLine,"欠费人数：");
            })
    }

  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
  
    height: calc(100vh - 120px);
    min-height: 100%;
    overflow-y: auto;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
